<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2808600" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon x-icon">&#xe62d;</span>
                <div class="name">0913-99猫后台图标制作_星星实体</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe624;</span>
                <div class="name">视频直播_视频直播</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe620;</span>
                <div class="name">ICON_投保</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe621;</span>
                <div class="name">ICON_退款</div>
                <div class="code-name">&amp;#xe621;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe622;</span>
                <div class="name">ICON_理赔</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe623;</span>
                <div class="name">ICON_预充值</div>
                <div class="code-name">&amp;#xe623;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe61f;</span>
                <div class="name">左箭头</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe77a;</span>
                <div class="name">向左</div>
                <div class="code-name">&amp;#xe77a;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe61e;</span>
                <div class="name">ICON_暂停</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe98e;</span>
                <div class="name">ICON_播放-copy</div>
                <div class="code-name">&amp;#xe98e;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe63a;</span>
                <div class="name">向下</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe98d;</span>
                <div class="name">二维码</div>
                <div class="code-name">&amp;#xe98d;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe614;</span>
                <div class="name">icon-057</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe615;</span>
                <div class="name">icon-062</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe616;</span>
                <div class="name">icon-060</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe617;</span>
                <div class="name">icon-059</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe619;</span>
                <div class="name">icon-063</div>
                <div class="code-name">&amp;#xe619;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe61a;</span>
                <div class="name">icon-065</div>
                <div class="code-name">&amp;#xe61a;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe61b;</span>
                <div class="name">icon-064</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe61c;</span>
                <div class="name">icon-058</div>
                <div class="code-name">&amp;#xe61c;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe61d;</span>
                <div class="name">icon-061</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe618;</span>
                <div class="name">商家图标_智能投放</div>
                <div class="code-name">&amp;#xe618;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe60f;</span>
                <div class="name">商家图标_放大缩小</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe60e;</span>
                <div class="name">icon-kfckfc</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe605;</span>
                <div class="name">99猫联盟_99猫商城</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe606;</span>
                <div class="name">99猫联盟_选品中心</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe607;</span>
                <div class="name">99猫联盟_数据管理</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe608;</span>
                <div class="name">99猫联盟_系统管理</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe609;</span>
                <div class="name">99猫联盟_首页</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe60a;</span>
                <div class="name">99猫联盟_交易管理</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe60b;</span>
                <div class="name">99猫联盟_资金管理</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe60c;</span>
                <div class="name">99猫联盟_退出</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe60d;</span>
                <div class="name">99猫联盟_联盟</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe650;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7f7;</span>
                <div class="name">账单</div>
                <div class="code-name">&amp;#xe7f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7f5;</span>
                <div class="name">投诉</div>
                <div class="code-name">&amp;#xe7f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7f2;</span>
                <div class="name">订单</div>
                <div class="code-name">&amp;#xe7f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7f0;</span>
                <div class="name">客服管理</div>
                <div class="code-name">&amp;#xe7f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7eb;</span>
                <div class="name">轮播</div>
                <div class="code-name">&amp;#xe7eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7dc;</span>
                <div class="name">热区</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7df;</span>
                <div class="name">标题</div>
                <div class="code-name">&amp;#xe7df;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7e3;</span>
                <div class="name">瀑布流</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7e5;</span>
                <div class="name">领券中心</div>
                <div class="code-name">&amp;#xe7e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7e6;</span>
                <div class="name">补贴</div>
                <div class="code-name">&amp;#xe7e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7e7;</span>
                <div class="name">图文导航</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe72e;</span>
                <div class="name">新品</div>
                <div class="code-name">&amp;#xe72e;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7d8;</span>
                <div class="name">hot</div>
                <div class="code-name">&amp;#xe7d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7da;</span>
                <div class="name">title</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7ca;</span>
                <div class="name">运营管理</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe776;</span>
                <div class="name">收藏</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe777;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe78c;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe6f4;</span>
                <div class="name">search-line</div>
                <div class="code-name">&amp;#xe6f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7bc;</span>
                <div class="name">右箭头</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe639;</span>
                <div class="name">f-refresh</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe77f;</span>
                <div class="name">关闭</div>
                <div class="code-name">&amp;#xe77f;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7b8;</span>
                <div class="name">coupons</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7b9;</span>
                <div class="name">quick</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7b2;</span>
                <div class="name">店铺管理</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7b3;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7b4;</span>
                <div class="name">数据管理</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7b1;</span>
                <div class="name">选择</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7b0;</span>
                <div class="name">切换</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7aa;</span>
                <div class="name">yingxiao-icon</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7ab;</span>
                <div class="name">tuiguang-icon</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe7ac;</span>
                <div class="name">zijin-icon</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe79a;</span>
                <div class="name">tips-ring-line</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe79b;</span>
                <div class="name">notes-tips-line</div>
                <div class="code-name">&amp;#xe79b;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe726;</span>
                <div class="name">add-fill</div>
                <div class="code-name">&amp;#xe726;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe729;</span>
                <div class="name">car-fill</div>
                <div class="code-name">&amp;#xe729;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe72a;</span>
                <div class="name">car</div>
                <div class="code-name">&amp;#xe72a;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe72b;</span>
                <div class="name">car-line</div>
                <div class="code-name">&amp;#xe72b;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe72c;</span>
                <div class="name">NEW</div>
                <div class="code-name">&amp;#xe72c;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe72d;</span>
                <div class="name">热卖</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe72f;</span>
                <div class="name">fire</div>
                <div class="code-name">&amp;#xe72f;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe730;</span>
                <div class="name">HOT</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe77b;</span>
                <div class="name">向右</div>
                <div class="code-name">&amp;#xe77b;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe6d4;</span>
                <div class="name">success-ring-line</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe6e0;</span>
                <div class="name">nochoice-ring-line</div>
                <div class="code-name">&amp;#xe6e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe775;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe784;</span>
                <div class="name">品质-面</div>
                <div class="code-name">&amp;#xe784;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe781;</span>
                <div class="name">品质</div>
                <div class="code-name">&amp;#xe781;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe787;</span>
                <div class="name">微信支付</div>
                <div class="code-name">&amp;#xe787;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe6f5;</span>
                <div class="name">list-line</div>
                <div class="code-name">&amp;#xe6f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe682;</span>
                <div class="name">目录</div>
                <div class="code-name">&amp;#xe682;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe6e9;</span>
                <div class="name">add-line</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe6ee;</span>
                <div class="name">delect-line</div>
                <div class="code-name">&amp;#xe6ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe73d;</span>
                <div class="name">text-centre</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe73e;</span>
                <div class="name">text-left</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe73f;</span>
                <div class="name">text-right</div>
                <div class="code-name">&amp;#xe73f;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe742;</span>
                <div class="name">font-size-32</div>
                <div class="code-name">&amp;#xe742;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe764;</span>
                <div class="name">kefu-line</div>
                <div class="code-name">&amp;#xe764;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe677;</span>
                <div class="name">社交钉钉</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe662;</span>
                <div class="name">wechat-fill</div>
                <div class="code-name">&amp;#xe662;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe703;</span>
                <div class="name">wechat-line</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe76d;</span>
                <div class="name">flow-line</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe76e;</span>
                <div class="name">img-line</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe71f;</span>
                <div class="name">commodity-line</div>
                <div class="code-name">&amp;#xe71f;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe723;</span>
                <div class="name">tuwennav-line</div>
                <div class="code-name">&amp;#xe723;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe725;</span>
                <div class="name">text-line</div>
                <div class="code-name">&amp;#xe725;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe735;</span>
                <div class="name">title-two</div>
                <div class="code-name">&amp;#xe735;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe736;</span>
                <div class="name">icon-type</div>
                <div class="code-name">&amp;#xe736;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe73a;</span>
                <div class="name">title-one</div>
                <div class="code-name">&amp;#xe73a;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe737;</span>
                <div class="name">banner-carousel-big</div>
                <div class="code-name">&amp;#xe737;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe739;</span>
                <div class="name">banner-slide</div>
                <div class="code-name">&amp;#xe739;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe73c;</span>
                <div class="name">goods-two</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe738;</span>
                <div class="name">banner-carousel</div>
                <div class="code-name">&amp;#xe738;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe741;</span>
                <div class="name">banner-line</div>
                <div class="code-name">&amp;#xe741;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe749;</span>
                <div class="name">banner-bg</div>
                <div class="code-name">&amp;#xe749;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe765;</span>
                <div class="name">banner-carousel-all</div>
                <div class="code-name">&amp;#xe765;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe76b;</span>
                <div class="name">goods-one</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe76f;</span>
                <div class="name">float-btn</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe770;</span>
                <div class="name">img-fill</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe771;</span>
                <div class="name">float-fill</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe752;</span>
                <div class="name">change-fill</div>
                <div class="code-name">&amp;#xe752;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe753;</span>
                <div class="name">box-fill</div>
                <div class="code-name">&amp;#xe753;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe754;</span>
                <div class="name">people-fill</div>
                <div class="code-name">&amp;#xe754;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe755;</span>
                <div class="name">car-fill</div>
                <div class="code-name">&amp;#xe755;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe756;</span>
                <div class="name">remind-fill</div>
                <div class="code-name">&amp;#xe756;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe757;</span>
                <div class="name">tab-fill</div>
                <div class="code-name">&amp;#xe757;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe772;</span>
                <div class="name">gift-fill</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe773;</span>
                <div class="name">addgoods-fill</div>
                <div class="code-name">&amp;#xe773;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe774;</span>
                <div class="name">addressee-fill</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe78b;</span>
                <div class="name">商品管理</div>
                <div class="code-name">&amp;#xe78b;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe786;</span>
                <div class="name">后台管理</div>
                <div class="code-name">&amp;#xe786;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe788;</span>
                <div class="name">交易管理</div>
                <div class="code-name">&amp;#xe788;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe789;</span>
                <div class="name">账户管理</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon x-icon">&#xe78a;</span>
                <div class="name">系统管理</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'x-icon';
  src: url('iconfont.woff2?t=1710394645407') format('woff2'),
       url('iconfont.woff?t=1710394645407') format('woff'),
       url('iconfont.ttf?t=1710394645407') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.x-icon {
  font-family: "x-icon" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="x-icon"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"x-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon x-icon icon-128"></span>
            <div class="name">
              0913-99猫后台图标制作_星星实体
            </div>
            <div class="code-name">.icon-128
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-127"></span>
            <div class="name">
              视频直播_视频直播
            </div>
            <div class="code-name">.icon-127
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-126"></span>
            <div class="name">
              ICON_投保
            </div>
            <div class="code-name">.icon-126
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-125"></span>
            <div class="name">
              ICON_退款
            </div>
            <div class="code-name">.icon-125
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-124"></span>
            <div class="name">
              ICON_理赔
            </div>
            <div class="code-name">.icon-124
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-123"></span>
            <div class="name">
              ICON_预充值
            </div>
            <div class="code-name">.icon-123
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-122"></span>
            <div class="name">
              左箭头
            </div>
            <div class="code-name">.icon-122
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-121"></span>
            <div class="name">
              向左
            </div>
            <div class="code-name">.icon-121
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-120"></span>
            <div class="name">
              ICON_暂停
            </div>
            <div class="code-name">.icon-120
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-119"></span>
            <div class="name">
              ICON_播放-copy
            </div>
            <div class="code-name">.icon-119
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-117"></span>
            <div class="name">
              向下
            </div>
            <div class="code-name">.icon-117
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-118"></span>
            <div class="name">
              二维码
            </div>
            <div class="code-name">.icon-118
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-116"></span>
            <div class="name">
              icon-057
            </div>
            <div class="code-name">.icon-116
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-115"></span>
            <div class="name">
              icon-062
            </div>
            <div class="code-name">.icon-115
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-114"></span>
            <div class="name">
              icon-060
            </div>
            <div class="code-name">.icon-114
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-113"></span>
            <div class="name">
              icon-059
            </div>
            <div class="code-name">.icon-113
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-112"></span>
            <div class="name">
              icon-063
            </div>
            <div class="code-name">.icon-112
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-111"></span>
            <div class="name">
              icon-065
            </div>
            <div class="code-name">.icon-111
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-110"></span>
            <div class="name">
              icon-064
            </div>
            <div class="code-name">.icon-110
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-109"></span>
            <div class="name">
              icon-058
            </div>
            <div class="code-name">.icon-109
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-108"></span>
            <div class="name">
              icon-061
            </div>
            <div class="code-name">.icon-108
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-107"></span>
            <div class="name">
              商家图标_智能投放
            </div>
            <div class="code-name">.icon-107
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-106"></span>
            <div class="name">
              商家图标_放大缩小
            </div>
            <div class="code-name">.icon-106
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-105"></span>
            <div class="name">
              icon-kfckfc
            </div>
            <div class="code-name">.icon-105
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-104"></span>
            <div class="name">
              99猫联盟_99猫商城
            </div>
            <div class="code-name">.icon-104
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-103"></span>
            <div class="name">
              99猫联盟_选品中心
            </div>
            <div class="code-name">.icon-103
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-102"></span>
            <div class="name">
              99猫联盟_数据管理
            </div>
            <div class="code-name">.icon-102
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-101"></span>
            <div class="name">
              99猫联盟_系统管理
            </div>
            <div class="code-name">.icon-101
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-100"></span>
            <div class="name">
              99猫联盟_首页
            </div>
            <div class="code-name">.icon-100
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-099"></span>
            <div class="name">
              99猫联盟_交易管理
            </div>
            <div class="code-name">.icon-099
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-098"></span>
            <div class="name">
              99猫联盟_资金管理
            </div>
            <div class="code-name">.icon-098
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-097"></span>
            <div class="name">
              99猫联盟_退出
            </div>
            <div class="code-name">.icon-097
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-096"></span>
            <div class="name">
              99猫联盟_联盟
            </div>
            <div class="code-name">.icon-096
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-095"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-095
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-094"></span>
            <div class="name">
              账单
            </div>
            <div class="code-name">.icon-094
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-093"></span>
            <div class="name">
              投诉
            </div>
            <div class="code-name">.icon-093
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-092"></span>
            <div class="name">
              订单
            </div>
            <div class="code-name">.icon-092
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-091"></span>
            <div class="name">
              客服管理
            </div>
            <div class="code-name">.icon-091
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-084"></span>
            <div class="name">
              轮播
            </div>
            <div class="code-name">.icon-084
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-085"></span>
            <div class="name">
              热区
            </div>
            <div class="code-name">.icon-085
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-087"></span>
            <div class="name">
              标题
            </div>
            <div class="code-name">.icon-087
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-088"></span>
            <div class="name">
              瀑布流
            </div>
            <div class="code-name">.icon-088
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-089"></span>
            <div class="name">
              领券中心
            </div>
            <div class="code-name">.icon-089
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-090"></span>
            <div class="name">
              补贴
            </div>
            <div class="code-name">.icon-090
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-086"></span>
            <div class="name">
              图文导航
            </div>
            <div class="code-name">.icon-086
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-083"></span>
            <div class="name">
              新品
            </div>
            <div class="code-name">.icon-083
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-081"></span>
            <div class="name">
              hot
            </div>
            <div class="code-name">.icon-081
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-082"></span>
            <div class="name">
              title
            </div>
            <div class="code-name">.icon-082
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-080"></span>
            <div class="name">
              运营管理
            </div>
            <div class="code-name">.icon-080
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-079"></span>
            <div class="name">
              收藏
            </div>
            <div class="code-name">.icon-079
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-078"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-078
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-077"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-077
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-076"></span>
            <div class="name">
              search-line
            </div>
            <div class="code-name">.icon-076
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-075"></span>
            <div class="name">
              右箭头
            </div>
            <div class="code-name">.icon-075
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-074"></span>
            <div class="name">
              f-refresh
            </div>
            <div class="code-name">.icon-074
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-073"></span>
            <div class="name">
              关闭
            </div>
            <div class="code-name">.icon-073
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-072"></span>
            <div class="name">
              coupons
            </div>
            <div class="code-name">.icon-072
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-071"></span>
            <div class="name">
              quick
            </div>
            <div class="code-name">.icon-071
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-002"></span>
            <div class="name">
              店铺管理
            </div>
            <div class="code-name">.icon-002
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-070"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-070
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-069"></span>
            <div class="name">
              数据管理
            </div>
            <div class="code-name">.icon-069
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-066"></span>
            <div class="name">
              选择
            </div>
            <div class="code-name">.icon-066
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-064"></span>
            <div class="name">
              切换
            </div>
            <div class="code-name">.icon-064
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-067"></span>
            <div class="name">
              yingxiao-icon
            </div>
            <div class="code-name">.icon-067
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-065"></span>
            <div class="name">
              tuiguang-icon
            </div>
            <div class="code-name">.icon-065
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-068"></span>
            <div class="name">
              zijin-icon
            </div>
            <div class="code-name">.icon-068
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-063"></span>
            <div class="name">
              tips-ring-line
            </div>
            <div class="code-name">.icon-063
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-062"></span>
            <div class="name">
              notes-tips-line
            </div>
            <div class="code-name">.icon-062
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-022"></span>
            <div class="name">
              add-fill
            </div>
            <div class="code-name">.icon-022
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-019"></span>
            <div class="name">
              car-fill
            </div>
            <div class="code-name">.icon-019
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-021"></span>
            <div class="name">
              car
            </div>
            <div class="code-name">.icon-021
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-020"></span>
            <div class="name">
              car-line
            </div>
            <div class="code-name">.icon-020
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-026"></span>
            <div class="name">
              NEW
            </div>
            <div class="code-name">.icon-026
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-028"></span>
            <div class="name">
              热卖
            </div>
            <div class="code-name">.icon-028
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-024"></span>
            <div class="name">
              fire
            </div>
            <div class="code-name">.icon-024
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-025"></span>
            <div class="name">
              HOT
            </div>
            <div class="code-name">.icon-025
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-061"></span>
            <div class="name">
              向右
            </div>
            <div class="code-name">.icon-061
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-060"></span>
            <div class="name">
              success-ring-line
            </div>
            <div class="code-name">.icon-060
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-059"></span>
            <div class="name">
              nochoice-ring-line
            </div>
            <div class="code-name">.icon-059
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-023"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-023
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-0051"></span>
            <div class="name">
              品质-面
            </div>
            <div class="code-name">.icon-0051
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-027"></span>
            <div class="name">
              品质
            </div>
            <div class="code-name">.icon-027
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-058"></span>
            <div class="name">
              微信支付
            </div>
            <div class="code-name">.icon-058
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-039"></span>
            <div class="name">
              list-line
            </div>
            <div class="code-name">.icon-039
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-057"></span>
            <div class="name">
              目录
            </div>
            <div class="code-name">.icon-057
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-037"></span>
            <div class="name">
              add-line
            </div>
            <div class="code-name">.icon-037
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-036"></span>
            <div class="name">
              delect-line
            </div>
            <div class="code-name">.icon-036
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-055"></span>
            <div class="name">
              text-centre
            </div>
            <div class="code-name">.icon-055
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-054"></span>
            <div class="name">
              text-left
            </div>
            <div class="code-name">.icon-054
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-056"></span>
            <div class="name">
              text-right
            </div>
            <div class="code-name">.icon-056
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-038"></span>
            <div class="name">
              font-size-32
            </div>
            <div class="code-name">.icon-038
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-053"></span>
            <div class="name">
              kefu-line
            </div>
            <div class="code-name">.icon-053
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-016"></span>
            <div class="name">
              社交钉钉
            </div>
            <div class="code-name">.icon-016
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-017"></span>
            <div class="name">
              wechat-fill
            </div>
            <div class="code-name">.icon-017
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-018"></span>
            <div class="name">
              wechat-line
            </div>
            <div class="code-name">.icon-018
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-050"></span>
            <div class="name">
              flow-line
            </div>
            <div class="code-name">.icon-050
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-046"></span>
            <div class="name">
              img-line
            </div>
            <div class="code-name">.icon-046
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-043"></span>
            <div class="name">
              commodity-line
            </div>
            <div class="code-name">.icon-043
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-048"></span>
            <div class="name">
              tuwennav-line
            </div>
            <div class="code-name">.icon-048
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-040"></span>
            <div class="name">
              text-line
            </div>
            <div class="code-name">.icon-040
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-042"></span>
            <div class="name">
              title-two
            </div>
            <div class="code-name">.icon-042
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-049"></span>
            <div class="name">
              icon-type
            </div>
            <div class="code-name">.icon-049
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-041"></span>
            <div class="name">
              title-one
            </div>
            <div class="code-name">.icon-041
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-032"></span>
            <div class="name">
              banner-carousel-big
            </div>
            <div class="code-name">.icon-032
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-035"></span>
            <div class="name">
              banner-slide
            </div>
            <div class="code-name">.icon-035
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-044"></span>
            <div class="name">
              goods-two
            </div>
            <div class="code-name">.icon-044
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-031"></span>
            <div class="name">
              banner-carousel
            </div>
            <div class="code-name">.icon-031
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-030"></span>
            <div class="name">
              banner-line
            </div>
            <div class="code-name">.icon-030
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-033"></span>
            <div class="name">
              banner-bg
            </div>
            <div class="code-name">.icon-033
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-034"></span>
            <div class="name">
              banner-carousel-all
            </div>
            <div class="code-name">.icon-034
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-045"></span>
            <div class="name">
              goods-one
            </div>
            <div class="code-name">.icon-045
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-052"></span>
            <div class="name">
              float-btn
            </div>
            <div class="code-name">.icon-052
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-047"></span>
            <div class="name">
              img-fill
            </div>
            <div class="code-name">.icon-047
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-051"></span>
            <div class="name">
              float-fill
            </div>
            <div class="code-name">.icon-051
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-012"></span>
            <div class="name">
              change-fill
            </div>
            <div class="code-name">.icon-012
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-010"></span>
            <div class="name">
              box-fill
            </div>
            <div class="code-name">.icon-010
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-013"></span>
            <div class="name">
              people-fill
            </div>
            <div class="code-name">.icon-013
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-011"></span>
            <div class="name">
              car-fill
            </div>
            <div class="code-name">.icon-011
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-014"></span>
            <div class="name">
              remind-fill
            </div>
            <div class="code-name">.icon-014
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-015"></span>
            <div class="name">
              tab-fill
            </div>
            <div class="code-name">.icon-015
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-007"></span>
            <div class="name">
              gift-fill
            </div>
            <div class="code-name">.icon-007
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-009"></span>
            <div class="name">
              addgoods-fill
            </div>
            <div class="code-name">.icon-009
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-008"></span>
            <div class="name">
              addressee-fill
            </div>
            <div class="code-name">.icon-008
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-004"></span>
            <div class="name">
              商品管理
            </div>
            <div class="code-name">.icon-004
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-001"></span>
            <div class="name">
              后台管理
            </div>
            <div class="code-name">.icon-001
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-003"></span>
            <div class="name">
              交易管理
            </div>
            <div class="code-name">.icon-003
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-006"></span>
            <div class="name">
              账户管理
            </div>
            <div class="code-name">.icon-006
            </div>
          </li>
          
          <li class="dib">
            <span class="icon x-icon icon-005"></span>
            <div class="name">
              系统管理
            </div>
            <div class="code-name">.icon-005
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="x-icon xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            x-icon" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-128"></use>
                </svg>
                <div class="name">0913-99猫后台图标制作_星星实体</div>
                <div class="code-name">#icon-128</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-127"></use>
                </svg>
                <div class="name">视频直播_视频直播</div>
                <div class="code-name">#icon-127</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-126"></use>
                </svg>
                <div class="name">ICON_投保</div>
                <div class="code-name">#icon-126</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-125"></use>
                </svg>
                <div class="name">ICON_退款</div>
                <div class="code-name">#icon-125</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-124"></use>
                </svg>
                <div class="name">ICON_理赔</div>
                <div class="code-name">#icon-124</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-123"></use>
                </svg>
                <div class="name">ICON_预充值</div>
                <div class="code-name">#icon-123</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-122"></use>
                </svg>
                <div class="name">左箭头</div>
                <div class="code-name">#icon-122</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-121"></use>
                </svg>
                <div class="name">向左</div>
                <div class="code-name">#icon-121</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-120"></use>
                </svg>
                <div class="name">ICON_暂停</div>
                <div class="code-name">#icon-120</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-119"></use>
                </svg>
                <div class="name">ICON_播放-copy</div>
                <div class="code-name">#icon-119</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-117"></use>
                </svg>
                <div class="name">向下</div>
                <div class="code-name">#icon-117</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-118"></use>
                </svg>
                <div class="name">二维码</div>
                <div class="code-name">#icon-118</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-116"></use>
                </svg>
                <div class="name">icon-057</div>
                <div class="code-name">#icon-116</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-115"></use>
                </svg>
                <div class="name">icon-062</div>
                <div class="code-name">#icon-115</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-114"></use>
                </svg>
                <div class="name">icon-060</div>
                <div class="code-name">#icon-114</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-113"></use>
                </svg>
                <div class="name">icon-059</div>
                <div class="code-name">#icon-113</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-112"></use>
                </svg>
                <div class="name">icon-063</div>
                <div class="code-name">#icon-112</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-111"></use>
                </svg>
                <div class="name">icon-065</div>
                <div class="code-name">#icon-111</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-110"></use>
                </svg>
                <div class="name">icon-064</div>
                <div class="code-name">#icon-110</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-109"></use>
                </svg>
                <div class="name">icon-058</div>
                <div class="code-name">#icon-109</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-108"></use>
                </svg>
                <div class="name">icon-061</div>
                <div class="code-name">#icon-108</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-107"></use>
                </svg>
                <div class="name">商家图标_智能投放</div>
                <div class="code-name">#icon-107</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-106"></use>
                </svg>
                <div class="name">商家图标_放大缩小</div>
                <div class="code-name">#icon-106</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-105"></use>
                </svg>
                <div class="name">icon-kfckfc</div>
                <div class="code-name">#icon-105</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-104"></use>
                </svg>
                <div class="name">99猫联盟_99猫商城</div>
                <div class="code-name">#icon-104</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-103"></use>
                </svg>
                <div class="name">99猫联盟_选品中心</div>
                <div class="code-name">#icon-103</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-102"></use>
                </svg>
                <div class="name">99猫联盟_数据管理</div>
                <div class="code-name">#icon-102</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-101"></use>
                </svg>
                <div class="name">99猫联盟_系统管理</div>
                <div class="code-name">#icon-101</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-100"></use>
                </svg>
                <div class="name">99猫联盟_首页</div>
                <div class="code-name">#icon-100</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-099"></use>
                </svg>
                <div class="name">99猫联盟_交易管理</div>
                <div class="code-name">#icon-099</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-098"></use>
                </svg>
                <div class="name">99猫联盟_资金管理</div>
                <div class="code-name">#icon-098</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-097"></use>
                </svg>
                <div class="name">99猫联盟_退出</div>
                <div class="code-name">#icon-097</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-096"></use>
                </svg>
                <div class="name">99猫联盟_联盟</div>
                <div class="code-name">#icon-096</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-095"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-095</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-094"></use>
                </svg>
                <div class="name">账单</div>
                <div class="code-name">#icon-094</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-093"></use>
                </svg>
                <div class="name">投诉</div>
                <div class="code-name">#icon-093</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-092"></use>
                </svg>
                <div class="name">订单</div>
                <div class="code-name">#icon-092</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-091"></use>
                </svg>
                <div class="name">客服管理</div>
                <div class="code-name">#icon-091</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-084"></use>
                </svg>
                <div class="name">轮播</div>
                <div class="code-name">#icon-084</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-085"></use>
                </svg>
                <div class="name">热区</div>
                <div class="code-name">#icon-085</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-087"></use>
                </svg>
                <div class="name">标题</div>
                <div class="code-name">#icon-087</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-088"></use>
                </svg>
                <div class="name">瀑布流</div>
                <div class="code-name">#icon-088</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-089"></use>
                </svg>
                <div class="name">领券中心</div>
                <div class="code-name">#icon-089</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-090"></use>
                </svg>
                <div class="name">补贴</div>
                <div class="code-name">#icon-090</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-086"></use>
                </svg>
                <div class="name">图文导航</div>
                <div class="code-name">#icon-086</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-083"></use>
                </svg>
                <div class="name">新品</div>
                <div class="code-name">#icon-083</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-081"></use>
                </svg>
                <div class="name">hot</div>
                <div class="code-name">#icon-081</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-082"></use>
                </svg>
                <div class="name">title</div>
                <div class="code-name">#icon-082</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-080"></use>
                </svg>
                <div class="name">运营管理</div>
                <div class="code-name">#icon-080</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-079"></use>
                </svg>
                <div class="name">收藏</div>
                <div class="code-name">#icon-079</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-078"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-078</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-077"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-077</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-076"></use>
                </svg>
                <div class="name">search-line</div>
                <div class="code-name">#icon-076</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-075"></use>
                </svg>
                <div class="name">右箭头</div>
                <div class="code-name">#icon-075</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-074"></use>
                </svg>
                <div class="name">f-refresh</div>
                <div class="code-name">#icon-074</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-073"></use>
                </svg>
                <div class="name">关闭</div>
                <div class="code-name">#icon-073</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-072"></use>
                </svg>
                <div class="name">coupons</div>
                <div class="code-name">#icon-072</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-071"></use>
                </svg>
                <div class="name">quick</div>
                <div class="code-name">#icon-071</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-002"></use>
                </svg>
                <div class="name">店铺管理</div>
                <div class="code-name">#icon-002</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-070"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-070</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-069"></use>
                </svg>
                <div class="name">数据管理</div>
                <div class="code-name">#icon-069</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-066"></use>
                </svg>
                <div class="name">选择</div>
                <div class="code-name">#icon-066</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-064"></use>
                </svg>
                <div class="name">切换</div>
                <div class="code-name">#icon-064</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-067"></use>
                </svg>
                <div class="name">yingxiao-icon</div>
                <div class="code-name">#icon-067</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-065"></use>
                </svg>
                <div class="name">tuiguang-icon</div>
                <div class="code-name">#icon-065</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-068"></use>
                </svg>
                <div class="name">zijin-icon</div>
                <div class="code-name">#icon-068</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-063"></use>
                </svg>
                <div class="name">tips-ring-line</div>
                <div class="code-name">#icon-063</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-062"></use>
                </svg>
                <div class="name">notes-tips-line</div>
                <div class="code-name">#icon-062</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-022"></use>
                </svg>
                <div class="name">add-fill</div>
                <div class="code-name">#icon-022</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-019"></use>
                </svg>
                <div class="name">car-fill</div>
                <div class="code-name">#icon-019</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-021"></use>
                </svg>
                <div class="name">car</div>
                <div class="code-name">#icon-021</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-020"></use>
                </svg>
                <div class="name">car-line</div>
                <div class="code-name">#icon-020</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-026"></use>
                </svg>
                <div class="name">NEW</div>
                <div class="code-name">#icon-026</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-028"></use>
                </svg>
                <div class="name">热卖</div>
                <div class="code-name">#icon-028</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-024"></use>
                </svg>
                <div class="name">fire</div>
                <div class="code-name">#icon-024</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-025"></use>
                </svg>
                <div class="name">HOT</div>
                <div class="code-name">#icon-025</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-061"></use>
                </svg>
                <div class="name">向右</div>
                <div class="code-name">#icon-061</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-060"></use>
                </svg>
                <div class="name">success-ring-line</div>
                <div class="code-name">#icon-060</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-059"></use>
                </svg>
                <div class="name">nochoice-ring-line</div>
                <div class="code-name">#icon-059</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-023"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-023</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-0051"></use>
                </svg>
                <div class="name">品质-面</div>
                <div class="code-name">#icon-0051</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-027"></use>
                </svg>
                <div class="name">品质</div>
                <div class="code-name">#icon-027</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-058"></use>
                </svg>
                <div class="name">微信支付</div>
                <div class="code-name">#icon-058</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-039"></use>
                </svg>
                <div class="name">list-line</div>
                <div class="code-name">#icon-039</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-057"></use>
                </svg>
                <div class="name">目录</div>
                <div class="code-name">#icon-057</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-037"></use>
                </svg>
                <div class="name">add-line</div>
                <div class="code-name">#icon-037</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-036"></use>
                </svg>
                <div class="name">delect-line</div>
                <div class="code-name">#icon-036</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-055"></use>
                </svg>
                <div class="name">text-centre</div>
                <div class="code-name">#icon-055</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-054"></use>
                </svg>
                <div class="name">text-left</div>
                <div class="code-name">#icon-054</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-056"></use>
                </svg>
                <div class="name">text-right</div>
                <div class="code-name">#icon-056</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-038"></use>
                </svg>
                <div class="name">font-size-32</div>
                <div class="code-name">#icon-038</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-053"></use>
                </svg>
                <div class="name">kefu-line</div>
                <div class="code-name">#icon-053</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-016"></use>
                </svg>
                <div class="name">社交钉钉</div>
                <div class="code-name">#icon-016</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-017"></use>
                </svg>
                <div class="name">wechat-fill</div>
                <div class="code-name">#icon-017</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-018"></use>
                </svg>
                <div class="name">wechat-line</div>
                <div class="code-name">#icon-018</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-050"></use>
                </svg>
                <div class="name">flow-line</div>
                <div class="code-name">#icon-050</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-046"></use>
                </svg>
                <div class="name">img-line</div>
                <div class="code-name">#icon-046</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-043"></use>
                </svg>
                <div class="name">commodity-line</div>
                <div class="code-name">#icon-043</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-048"></use>
                </svg>
                <div class="name">tuwennav-line</div>
                <div class="code-name">#icon-048</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-040"></use>
                </svg>
                <div class="name">text-line</div>
                <div class="code-name">#icon-040</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-042"></use>
                </svg>
                <div class="name">title-two</div>
                <div class="code-name">#icon-042</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-049"></use>
                </svg>
                <div class="name">icon-type</div>
                <div class="code-name">#icon-049</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-041"></use>
                </svg>
                <div class="name">title-one</div>
                <div class="code-name">#icon-041</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-032"></use>
                </svg>
                <div class="name">banner-carousel-big</div>
                <div class="code-name">#icon-032</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-035"></use>
                </svg>
                <div class="name">banner-slide</div>
                <div class="code-name">#icon-035</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-044"></use>
                </svg>
                <div class="name">goods-two</div>
                <div class="code-name">#icon-044</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-031"></use>
                </svg>
                <div class="name">banner-carousel</div>
                <div class="code-name">#icon-031</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-030"></use>
                </svg>
                <div class="name">banner-line</div>
                <div class="code-name">#icon-030</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-033"></use>
                </svg>
                <div class="name">banner-bg</div>
                <div class="code-name">#icon-033</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-034"></use>
                </svg>
                <div class="name">banner-carousel-all</div>
                <div class="code-name">#icon-034</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-045"></use>
                </svg>
                <div class="name">goods-one</div>
                <div class="code-name">#icon-045</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-052"></use>
                </svg>
                <div class="name">float-btn</div>
                <div class="code-name">#icon-052</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-047"></use>
                </svg>
                <div class="name">img-fill</div>
                <div class="code-name">#icon-047</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-051"></use>
                </svg>
                <div class="name">float-fill</div>
                <div class="code-name">#icon-051</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-012"></use>
                </svg>
                <div class="name">change-fill</div>
                <div class="code-name">#icon-012</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-010"></use>
                </svg>
                <div class="name">box-fill</div>
                <div class="code-name">#icon-010</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-013"></use>
                </svg>
                <div class="name">people-fill</div>
                <div class="code-name">#icon-013</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-011"></use>
                </svg>
                <div class="name">car-fill</div>
                <div class="code-name">#icon-011</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-014"></use>
                </svg>
                <div class="name">remind-fill</div>
                <div class="code-name">#icon-014</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-015"></use>
                </svg>
                <div class="name">tab-fill</div>
                <div class="code-name">#icon-015</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-007"></use>
                </svg>
                <div class="name">gift-fill</div>
                <div class="code-name">#icon-007</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-009"></use>
                </svg>
                <div class="name">addgoods-fill</div>
                <div class="code-name">#icon-009</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-008"></use>
                </svg>
                <div class="name">addressee-fill</div>
                <div class="code-name">#icon-008</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-004"></use>
                </svg>
                <div class="name">商品管理</div>
                <div class="code-name">#icon-004</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-001"></use>
                </svg>
                <div class="name">后台管理</div>
                <div class="code-name">#icon-001</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-003"></use>
                </svg>
                <div class="name">交易管理</div>
                <div class="code-name">#icon-003</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-006"></use>
                </svg>
                <div class="name">账户管理</div>
                <div class="code-name">#icon-006</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-005"></use>
                </svg>
                <div class="name">系统管理</div>
                <div class="code-name">#icon-005</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
